<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知测试 - 提升权限版</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .notification {
            padding: 10px;
            margin: 5px 0;
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .status {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
        }
        input[type="text"] {
            padding: 8px;
            margin: 5px;
            width: 200px;
        }
        .important {
            color: red;
            font-weight: bold;
        }
        .instruction {
            background-color: #e2f0ff;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>通知系统测试页面</h1>
    
    <div class="instruction">
        <h3>使用说明</h3>
        <p><span class="important">重要：</span> 请按照以下步骤操作：</p>
        <ol>
            <li>关闭Chrome浏览器所有窗口</li>
            <li>以允许CORS的方式重新打开Chrome浏览器：
                <pre>chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"</pre>
                (Windows) 或者
                <pre>open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"</pre>
                (Mac)
            </li>
            <li>在打开的浏览器中访问这个页面</li>
            <li>输入用户ID和Token，然后进行测试</li>
        </ol>
    </div>

    <div class="section">
        <h2>用户登录</h2>
        <div>
            <input type="text" id="userId" placeholder="用户ID">
            <input type="text" id="token" placeholder="Token" style="width: 300px;">
            <button onclick="login()">登录</button>
        </div>
    </div>

    <div class="section">
        <h2>通知设置</h2>
        <div>
            <label>
                <input type="checkbox" id="messageNotification" checked>
                接收消息通知
            </label>
            <label>
                <input type="checkbox" id="favoriteNotification" checked>
                接收收藏通知
            </label>
            <label>
                <input type="checkbox" id="transactionNotification" checked>
                接收交易通知
            </label>
            <label>
                <input type="checkbox" id="systemNotification" checked>
                接收系统通知
            </label>
        </div>
        <button onclick="updateSettings()">保存设置</button>
        <button onclick="getCurrentSettings()">获取当前设置</button>
        <div id="settingsResult"></div>
    </div>

    <div class="section">
        <h2>创建测试通知</h2>
        <div>
            <select id="notificationType">
                <option value="message">消息通知</option>
                <option value="favorite">收藏通知</option>
                <option value="transaction">交易通知</option>
                <option value="system">系统通知</option>
            </select>
            <input type="text" id="content" placeholder="通知内容">
            <input type="text" id="relatedId" placeholder="关联ID">
            <button onclick="createNotification()">创建通知</button>
        </div>
        <div id="createResult"></div>
    </div>

    <div class="section">
        <h2>通知列表</h2>
        <button onclick="getNotifications()">获取所有通知</button>
        <div id="notifications"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080/api';
        let currentUserId = null;
        
        // 用户登录
        function login() {
            const userId = document.getElementById('userId').value;
            const token = document.getElementById('token').value;

            if (!userId || !token) {
                alert('请输入用户ID和Token');
                return;
            }

            currentUserId = userId;
            getCurrentSettings();
            
            alert('登录成功！用户ID: ' + userId);
        }
        
        // 获取当前设置
        function getCurrentSettings() {
            if (!currentUserId) {
                alert('请先登录');
                return;
            }
            
            const token = document.getElementById('token').value;
            const tokenWithBearer = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
            
            fetch(`${API_BASE_URL}/user/settings`, {
                headers: {
                    'Authorization': tokenWithBearer
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    const settings = data.data;
                    document.getElementById('messageNotification').checked = settings.notification_messages === 1;
                    document.getElementById('favoriteNotification').checked = settings.notification_favorites === 1;
                    document.getElementById('transactionNotification').checked = settings.notification_transactions === 1;
                    document.getElementById('systemNotification').checked = settings.notification_system === 1;
                    
                    document.getElementById('settingsResult').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#d4edda; color:#155724; border-radius:4px;">
                            设置获取成功!
                        </div>
                    `;
                } else {
                    document.getElementById('settingsResult').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                            获取设置失败: ${data.message}
                        </div>
                    `;
                }
            })
            .catch(error => {
                document.getElementById('settingsResult').innerHTML = `
                    <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                        获取设置失败: ${error.message}<br>
                        请确保您使用了正确的方式打开Chrome以允许CORS。
                    </div>
                `;
            });
        }
        
        // 更新通知设置
        function updateSettings() {
            if (!currentUserId) {
                alert('请先登录');
                return;
            }
            
            const settings = {
                notification_messages: document.getElementById('messageNotification').checked ? 1 : 0,
                notification_favorites: document.getElementById('favoriteNotification').checked ? 1 : 0,
                notification_transactions: document.getElementById('transactionNotification').checked ? 1 : 0,
                notification_system: document.getElementById('systemNotification').checked ? 1 : 0
            };
            
            const token = document.getElementById('token').value;
            const tokenWithBearer = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
            
            fetch(`${API_BASE_URL}/user/settings`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': tokenWithBearer
                },
                body: JSON.stringify(settings)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    document.getElementById('settingsResult').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#d4edda; color:#155724; border-radius:4px;">
                            设置更新成功!
                        </div>
                    `;
                } else {
                    document.getElementById('settingsResult').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                            更新设置失败: ${data.message}
                        </div>
                    `;
                }
            })
            .catch(error => {
                document.getElementById('settingsResult').innerHTML = `
                    <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                        更新设置失败: ${error.message}<br>
                        请确保您使用了正确的方式打开Chrome以允许CORS。
                    </div>
                `;
            });
        }
        
        // 创建通知
        function createNotification() {
            if (!currentUserId) {
                alert('请先登录');
                return;
            }
            
            const type = document.getElementById('notificationType').value;
            const content = document.getElementById('content').value;
            const relatedId = document.getElementById('relatedId').value;
            
            if (!content) {
                alert('请输入通知内容');
                return;
            }
            
            const token = document.getElementById('token').value;
            const tokenWithBearer = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
            
            // 构造请求参数
            const data = {
                type: type,
                content: content,
                userId: parseInt(currentUserId),
                relatedId: relatedId ? parseInt(relatedId) : null
            };
            
            fetch(`${API_BASE_URL}/notifications`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': tokenWithBearer
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    document.getElementById('createResult').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#d4edda; color:#155724; border-radius:4px;">
                            通知创建成功!
                        </div>
                    `;
                    
                    // 创建通知后刷新通知列表
                    getNotifications();
                } else {
                    document.getElementById('createResult').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                            创建通知失败: ${data.message}
                        </div>
                    `;
                }
            })
            .catch(error => {
                document.getElementById('createResult').innerHTML = `
                    <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                        创建通知失败: ${error.message}<br>
                        请确保您使用了正确的方式打开Chrome以允许CORS。
                    </div>
                `;
            });
        }
        
        // 获取所有通知
        function getNotifications() {
            if (!currentUserId) {
                alert('请先登录');
                return;
            }
            
            const token = document.getElementById('token').value;
            const tokenWithBearer = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
            
            fetch(`${API_BASE_URL}/notifications`, {
                headers: {
                    'Authorization': tokenWithBearer
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    const notifications = data.data;
                    const notificationsDiv = document.getElementById('notifications');
                    notificationsDiv.innerHTML = '';
                    
                    if (notifications.length === 0) {
                        notificationsDiv.innerHTML = '<p>没有通知</p>';
                        return;
                    }
                    
                    notifications.forEach(notification => {
                        addNotificationToList(notification);
                    });
                } else {
                    document.getElementById('notifications').innerHTML = `
                        <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                            获取通知失败: ${data.message}
                        </div>
                    `;
                }
            })
            .catch(error => {
                document.getElementById('notifications').innerHTML = `
                    <div style="margin-top:10px; padding:10px; background-color:#f8d7da; color:#721c24; border-radius:4px;">
                        获取通知失败: ${error.message}<br>
                        请确保您使用了正确的方式打开Chrome以允许CORS。
                    </div>
                `;
            });
        }
        
        // 添加通知到列表
        function addNotificationToList(notification) {
            const notificationsDiv = document.getElementById('notifications');
            const notificationDiv = document.createElement('div');
            notificationDiv.className = 'notification';
            
            let content = '';
            switch (notification.type) {
                case 'message':
                    content = `新消息: ${notification.content}`;
                    break;
                case 'favorite':
                    content = `收藏通知: ${notification.content}`;
                    break;
                case 'transaction':
                    content = `交易通知: ${notification.content}`;
                    break;
                case 'system':
                    content = `系统通知: ${notification.content}`;
                    break;
                default:
                    content = `通知: ${notification.content}`;
                    break;
            }
            
            const isRead = notification.isRead ? '已读' : '<strong>未读</strong>';
            const timestamp = notification.createdAt 
                ? new Date(notification.createdAt).toLocaleString()
                : new Date().toLocaleString();
            
            notificationDiv.innerHTML = `
                <div>${content}</div>
                <div style="font-size: 0.8em; color: #666;">
                    ${timestamp} | ${isRead} | ID: ${notification.id}
                    ${notification.relatedId ? ' | 关联ID: ' + notification.relatedId : ''}
                </div>
            `;
            
            notificationsDiv.appendChild(notificationDiv);
        }
    </script>
</body>
</html> 